<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>住宿管理</title>
    <!--vue-->
    <script src="/js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/css/index.css">
    <!-- 引入组件库 -->
    <script src="/js/index.js"></script>
    <!--axios-->
    <script src="/js/axios.min.js"></script>

    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
        }
        .avatar {
            width: 100px;
            height: 100px;
            display: block;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-row>
            <el-col :span="3">&nbsp;</el-col>
            <el-col :span="3">
                <el-button type="primary" size="mini" @click="addFormVisible=true" icon="el-icon-circle-plus">入住</el-button>
            </el-col>
            <el-col :span="3">
                <el-input v-model="USERID" size="mini" placeholder="请输工号"></el-input>
            </el-col>
            <el-col :span="3">
                <el-input v-model="USERNAME" size="mini" placeholder="请输姓名"></el-input>
            </el-col>
            <el-col :span="3">
                <el-button type="primary" size="mini" @click="search()" icon="el-icon-search">搜索</el-button>
            </el-col>
            <el-col :span="3">
                <el-button type="primary" size="mini" @click="flush()" icon="el-icon-search">刷新</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-table
                    :data="tableData"
                    style="width:100%">
                <el-table-column
                        prop="USERID"
                        label="工号">
                </el-table-column>
                <el-table-column
                        prop="USERNAME"
                        label="姓名">
                </el-table-column>
                <el-table-column
                        prop="SEX"
                        label="性别">
                </el-table-column>
                <el-table-column
                        prop="FLOOR"
                        label="楼层">
                </el-table-column>
                <el-table-column
                        prop="ROOM"
                        label="房间号">
                </el-table-column>
                <el-table-column
                        prop="CHECKINDATE"
                        label="入住时间"
                        >
                </el-table-column>
                <el-table-column
                        prop="STATE"
                        label="住宿状态"
                        :formatter="stateFormat">
                </el-table-column>
                <el-table-column label="操作"  width="250">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="toEdit(scope.$index, scope.row)">更换宿舍</el-button>
                        <el-button type="danger" @click="updateIng(scope.$index, scope.row)">退宿申请</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-row>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[2,3,5,10,100, 200, 300, 400]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-row>

        <el-row>
            <el-dialog title="员工入住" :visible.sync="addFormVisible" width="50%">
                <el-form :model="form">
                    <el-form-item label="员工工号" :label-width="formLabelWidth">
                        <el-input v-model="form.USERID" autocomplete="off" @change="seachUserId(form)"></el-input>
                        <div v-if="showInfo" style="color: red">
                            {{show}}
                        </div>
                    </el-form-item>
                    <el-form-item label="员工姓名" :label-width="formLabelWidth">
                        <el-input v-model="form.USERNAME" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" :label-width="formLabelWidth">
                        <el-input v-model="form.SEX" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="楼层" :label-width="formLabelWidth">
                        <el-select v-model="form.floor" placeholder="请选择" @change="addGetRoom(form)" >
                            <el-option v-for="f in floor" :label="f.FLOOR" :value="f.FLOOR">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="房间号" :label-width="formLabelWidth" >
                        <el-select v-model="form.room" placeholder="请选择">
                            <el-option v-for="r in room" :label="r.ROOM" :value="r.ROOM">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="执行人：" :label-width="formLabelWidth">
                        <span v-model="form.user_name">{{userInfo.user_name}}</span>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="add()">确 定</el-button>
                </span>
            </el-dialog>
        </el-row>

        <el-row>
            <el-dialog title="更换宿舍" :visible.sync="updateFormVisible" width="50%">
                    <el-form :model="form">
                        <el-form-item label="工号" :label-width="formLabelWidth">
                        <el-input v-model="form.USERID" autocomplete="off" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="姓名" :label-width="formLabelWidth">
                        <el-input v-model="form.USERNAME" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="性别" :label-width="formLabelWidth">
                        <el-input v-model="form.SEX" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="原楼层" :label-width="formLabelWidth">
                        <el-input v-model="form.FLOOR" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="原房间号" :label-width="formLabelWidth">
                            <el-input  v-model="form.ROOM" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="新楼层" :label-width="formLabelWidth">
                            <el-select v-model="form.floor" placeholder="请选择" @change="getRoom(form)" >
                                <el-option v-for="f in floor" :label="f.FLOOR" :value="f.FLOOR">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="新房间号" :label-width="formLabelWidth" >
                            <el-select v-model="form.room" placeholder="请选择">
                                <el-option v-for="r in room" :label="r.ROOM" :value="r.ROOM">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="更换时间" :label-width="formLabelWidth">
                            <el-input  v-model="form.updateTime" autocomplete="off" type="date"></el-input>
                        </el-form-item>
                        <el-form-item label="住宿状态" :label-width="formLabelWidth" >
                            <el-select v-model="form.STATE" placeholder="请选择" >
                                <el-option label="正常住宿" :value="0"></el-option>
                                <el-option label="已退宿" :value="1"></el-option>
                                <el-option label="退宿中" :value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="updateFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="update()">确 定</el-button>
                </div>
            </el-dialog>

        </el-row>
    </div>

    <script>
        var vue = new Vue({
            el:"#app",
            data:{//数据
                tableData:[],
                currentPage:1,
                pageSize:5,
                total:20,
                USERID:'',
                USERNAME:'',
                dm:[],
                userInfo:{},
                addFormVisible:false,
                updateFormVisible:false,
                form: {},//添加或者更新form
                formLabelWidth: "120px",
                SEX:null,
                ROOM:null,
                floor:null,
                room:[],
                showInfoState:0,
                showInfo:false,
                show:"哈哈啊哈哈",
                checkInfo:[],
            },
            created:function () {
                _this =this;
                //初始化数据，加载所有的角色
                axios.get('/dm/dmList',{
                    params: {
                        pageNo:1,
                        pageSize:1000,
                    }
                }).then(function (response) {
                    _this.dm=response.data.page;
                });
                this.loadData();
                axios.get('/user/getLoginSession')
                    .then(function (response) {
                        _this.userInfo=response.data;
                    });
            },
            methods:{
                //加载数据的方法
                loadData:function () {
                    _this =this;
                    //初始化数据
                    axios.get('/dm/dmList', {
                        params: {
                            pageNo:this.currentPage,
                            pageSize:this.pageSize,
                            USERID:this.USERID,
                            USERNAME:this.USERNAME
                        },
                    })
                        .then(function (response) {
                            // handle success  处理成功，回调的方法
                            //console.log(response);
                            //赋值分页列表
                            _this.tableData = response.data.page;
                            //删除最后一页为空时，调到上一页
                            //alert(_this.tableData.length);
                            if(_this.tableData.length==0&&_this.currentPage!=1){
                                _this.currentPage=_this.currentPage-1;
                                _this.loadData();
                            }
                            //赋值总条数
                            _this.total = response.data.total;
                        })
                        .catch(function (error) {
                            // handle error 处理异常
                            //console.log(error);
                        })
                        .then(function () {
                            // always executed  总是执行  相当于finally
                        });
                },
                //每页数量发生变化时
                handleSizeChange:function (v) {
                    this.pageSize=v;
                    this.loadData();
                },
                //当前页数放生变化是
                handleCurrentChange:function (v) {
                    this.currentPage=v;
                    this.loadData();
                },
                stateFormat(row, column) {
                    if (row.STATE === 0) {
                        return '正常住宿'
                    }
                    if (row.STATE === 1) {
                        return '已退宿'
                    }
                    if (row.STATE === 2) {
                        return '退宿中'
                    }
                },
                //修改页面赋值
                toEdit:function (index, row) {
                    this.form.avatar = '';
                    //console.log(row);
                    this.form = row;
                    //根据性别查看楼层
                    axios.get('/dm/floorList',{
                        params: {
                            SEX:row.SEX,
                        },
                    }).then(function (response) {
                        _this.floor=response.data;
                    });
                    this.updateFormVisible=true;
                },
                //根据新楼层和性别查找有空位的房间
                getRoom:function (form) {
                    //alert("大傻逼");
                    //console.log(form);
                    axios.get('/dm/roomList',{
                        params: {
                            floor:form.floor,
                            SEX:form.SEX,
                            ROOM:form.ROOM,
                        },
                    }).then(function (response) {
                        _this.room=response.data;
                    });
                },
                addGetRoom:function (form) {
                    //alert("大傻逼");
                    //console.log(form);
                    axios.get('/dm/addRoomList',{
                        params: {
                            floor:form.floor,
                            SEX:form.SEX,
                        },
                    }).then(function (response) {
                        _this.room=response.data;
                    });
                },
                flush() {
                    //刷新当前页
                    location.reload();
                },
                // 搜索方法
                search: function () {
                    this.currentPage = 1;
                    this.loadData();
                },
                //验证员工是否入住
                seachUserId:function (from){
                    //alert("大傻子1");
                    _this =this;
                    axios.get('/dm/checkInfo',{
                        params:{
                            USERID:from.USERID,
                        }
                    })
                        .then(function (res) {
                            this.checkInfo = res.data;
                            //console.log(this.checkInfo[0].ROOM);
                            var userId = this.checkInfo[0].USERID;
                            var userName = this.checkInfo[0].USERNAME;
                            var sex = this.checkInfo[0].SEX;
                            var room = this.checkInfo[0].ROOM;
                            //console.log(userId);
                            //console.log(userId!=null&&room!=null);
                            if (userId!=null&&room!=null){
                                //alert("123")
                                _this.show="此员工已入住";
                                _this.showInfo=true;

                            }else if (room==null){
                                _this.show="此员工暂未入住";
                                _this.showInfo=true;
                                from.USERNAME=userName;
                                from.SEX=sex;
                                axios.get('/dm/floorList',{
                                    params: {
                                        SEX:from.SEX,
                                    },
                                }).then(function (response) {
                                    _this.floor=response.data;
                                });
                            }
                        })
                    from.USERNAME="";
                    from.SEX="";
                    _this.show="无此员工信息";
                    _this.showInfo=true;

                },
                update:function(){
                    _this = this;
                    //JSON.stringify JSON 转 String
                    alert(JSON.stringify(this.form));
                    axios.post('/dm/update',this.form).then(function (response) {
                        //console.log(response);
                        if(response.status == 200){
                            //提示成功
                            _this.$message({
                                message: '恭喜你，操作成功',
                                type: 'success'
                            });

                            //关闭弹出框
                            _this.updateFormVisible=false;
                            //重新加载数据
                            _this.loadData();
                        }
                    }).catch(function (error) {
                        console.log(error);
                        _this.$message.error("你错了。。。");
                    });

                    axios.post('/dm/add',this.form).then(function (response) { });
                    axios.post('/dm/del',this.form).then(function (response) { });

                },
                add: function () {
                    _this = this;
                    this.avatar = '';
                    alert(JSON.stringify(this.form));
                    axios.post('/dm/insert', this.form).then(function (response) {
                        console.log(response);
                        if (response.status == 200) {
                            //提示成功
                            _this.$message({
                                message: '恭喜你，添加成功',
                                type: 'success'
                            });

                            //关闭弹出框
                            _this.addFormVisible = false;
                            //重新加载数据
                            _this.loadData();
                            //清空form
                            _this.form = {};
                        }
                    }).catch(function (error) {
                        console.log(error);
                        _this.$message.error("你错了。。。");
                    });
                    axios.post('/dm/del',this.form).then(function (response) { });
                },
                updateIng:function(index, row){
                    _this = this;
                    axios.post('/dm/updateIng?USERID='+row.USERID).then(function (response) {
                        console.log(response);
                        if (response.status == 200) {
                            if (response.data > 0) {
                                //提示成功
                                _this.$message({
                                    type: 'success',
                                    message: '申请提交成功!'
                                });
                                //重新加载数据
                                _this.loadData();
                            }
                        }
                    }).catch(function (error) {
                        console.log(error);
                        _this.$message.error("你错了。。。");
                    });
                },
                }
        });
    </script>

</body>
</html>